<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <miniAppSelect :is-resize="isResize" :multiple="true" @result="miniAppResult" />
        <BiFormItem label="小程序类型">
          <template slot="content">
            <el-select v-model="requestData.app_type" clearable size="small">
              <el-option v-for="item in appTypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch('查询')"
              >查询</el-button
            >
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button v-permission:mini-add @click="showMiniapp = true">内容同步</el-button>
          <el-button v-permission:mini-add type="primary" @click="addNewApp">新增小程序</el-button>
          <svg-icon icon-class="record" class="recordIcon" @click="requestRecord" />
        </div>
      </div>
      <div v-permission:mini-index class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template #name="{ row }">
            <div class="rowFlex columnCenter">
              <div class="miniAppImage">
                <el-image
                  :src="
                    row.headimg || 'https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/default.png'
                  "
                  class="titleImage"
                ></el-image>
                <svg-icon v-if="row.app_type == 1" icon-class="miniapp" class="imageIcon" />
                <svg-icon v-else icon-class="douyin" class="imageIcon" />
              </div>
              <div class="miniApp">
                <p class="title" @click="toLinkWechat(row)">
                  {{ row.name }}
                  <el-popover placement="right" trigger="hover">
                    <div>
                      <el-image :src="row.qr_code" class="qrImage"></el-image>
                    </div>
                    <svg-icon slot="reference" icon-class="qr-code" style="color: #333" />
                  </el-popover>
                </p>
                <p class="infoText">{{ row.app_id }}</p>
              </div>
            </div>
          </template>
          <template #status="{ row }">
            <div class="colorStatus">
              <p v-if="row.status == 0" class="normal">{{ row.status_text }}</p>
              <p v-else-if="row.status == 1" class="success">{{ row.status_text }}</p>
              <p v-else-if="row.status == 2" class="indeter">{{ row.status_text }}</p>
            </div>
          </template>
          <template #feedback_status="{ row }">
            <el-switch
              v-model="row.feedback_status"
              active-value="1"
              inactive-value="2"
              @change="onfeedbackChange(row)"
            >
            </el-switch>
          </template>
          <template #version="{ row }">
            <div class="colorStatus">
              <div v-if="row.version.length > 0">
                <div
                  v-for="(item, index) in row.version"
                  :key="index"
                  style="margin-top: 5px"
                  class="rowFlex columnCenter"
                >
                  <span style="margin-right: 5px">V{{ item.version_number }}</span>
                  <!-- 1 上线   2 对接中 3 已下线  4审核中 -->
                  <p v-if="item.version_status == 1" class="rowFlex columnCenter">
                    <span class="success">已上线</span>
                  </p>
                  <p v-if="item.version_status == 2" class="rowFlex columnCenter">
                    <span class="indeter">对接中</span>
                  </p>
                  <p v-if="item.version_status == 3" class="rowFlex columnCenter">
                    <span class="fail">已下线</span>
                  </p>
                  <p v-if="item.version_status == 4" class="rowFlex columnCenter">
                    <span class="fail">审核中</span>
                  </p>
                  <p v-if="item.version_status == 5" class="rowFlex columnCenter">
                    <span class="all">审核通过待发布</span>
                  </p>
                </div>
              </div>
            </div>
          </template>
          <template #zip="{ row }">
            <el-button v-permission:mini-share type="text" size="medium" @click="shareSetting(row)">分享设置</el-button>
            <el-dropdown @command="handleCommand($event, row)">
              <el-button style="margin-left: 10px" type="text" size="medium"
                >更多操作 <i class="el-icon-arrow-down"></i
              ></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-permission:mini-version command="version">版本设置</el-dropdown-item>
                <el-dropdown-item v-show="row.app_type == 1" v-permission:mini-pay command="pay"
                  >支付设置</el-dropdown-item
                >
                <!-- <el-dropdown-item
                  v-show="row.app_type == 1"
                  v-permission:mini-Addcustomer
                  command="customer"
                >添加企微</el-dropdown-item> -->
                <el-dropdown-item v-show="row.app_type == 1" v-permission:mini-Addcustomer command="drainage"
                  >引流设置</el-dropdown-item
                >
                <el-dropdown-item v-if="row.app_type == 2" command="dyOperate">关注加群</el-dropdown-item>
                <el-dropdown-item v-if="row.app_type === '2'" command="service">客服设置</el-dropdown-item>
                <el-dropdown-item v-if="row.app_type === '1'" command="wxServer">客服设置</el-dropdown-item>
                <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="deleteRow(row.id)">
                  <el-dropdown-item slot="reference" v-permission:mini-del command="del">删除</el-dropdown-item>
                </el-popconfirm>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </BiTable>
      </div>
    </Block>
    <!-- 新增 -->
    <BiDrawer
      v-model="addMiniApp"
      drawer-title="新建小程序"
      :component="drawerComponent.addMiniApp"
      drawer-size="25%"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 新增分享内容 -->
    <BiDrawer
      v-model="shareDrawer"
      drawer-title="新增分享内容"
      :row-info="rowInfo"
      :component="drawerComponent.shareDrawer"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 版本 -->
    <BiDrawer
      v-model="versionDrawer"
      drawer-title="版本管理"
      :row-info="rowInfo"
      :component="drawerComponent.versionDrawer"
      drawer-size="35%"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 新增支付设置 -->
    <BiDrawer
      v-model="payDrawer"
      drawer-title="支付设置"
      :row-info="rowInfo"
      :component="drawerComponent.payDrawer"
      drawer-size=""
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showRecord"
      drawer-title="短剧同步记录"
      active-tab="2"
      :component="drawerComponent.syncRecord"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="showMiniapp"
      drawer-title="内容同步"
      :component="drawerComponent.syncMiniapp"
      drawer-size="400"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 抖音运营 关注加群 -->
    <BiDrawer
      v-model="dyOperateShow"
      drawer-title="关注加群"
      :row-info="rowInfo"
      :component="drawerComponent.dyOperate"
      drawer-size="35%"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 抖音支付 -->
    <dyPay :show.sync="showDyPay" width="450px" :row-info="rowInfo" @confirm="clickSearch" />
    <dySet :show.sync="showDyset" width="450px" :row-info="rowInfo" @confirm="clickSearch" />
    <!-- 添加企微 -->
    <BiDrawer
      v-model="customerShow"
      drawer-title="添加企微"
      :row-info="rowInfo"
      :component="drawerComponent.customer"
      drawer-size="820px"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="wxServerShow"
      :drawer-title="`客服设置 (${rowInfo.name})`"
      :row-info="rowInfo"
      :component="drawerComponent.wxServer"
      drawer-size="650px"
      @ok="onSubmit"
    ></BiDrawer>
    <!-- 引流设置 -->
    <BiDrawer
      v-model="drainageShow"
      :drawer-title="`引流设置(${rowInfo.name})`"
      :row-info="rowInfo"
      :component="drawerComponent.drainage"
      drawer-size="820px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { miniAppIndex, miniAppDel, encodeRowId, setFeedbackStatus } from '@/api/miniApp';
import { appTypeDropdown } from '@/api/common';
import miniAppSelect from '@/common/component/form/miniAppSelect.vue';
import BiDrawer from '@/components/BiDrawer';
import shareDrawer from './component/shareDrawer.vue';
import versionDrawer from './component/version.vue';
import addMiniApp from './component/addMiniApp.vue';
import payDrawer from './component/payDrawer.vue';
import syncRecord from '@/views/content/index/component/syncRecord.vue';
import syncMiniapp from './component/syncMiniapp.vue';
import dyPay from './component/dyPay.vue';
import dySet from './component/dySet.vue';
import dyOperate from './component/dyOperate.vue';
import customer from './component/customer.vue';
import drainage from './component/drainage.vue';
import wxServer from './component/wxSet.vue';

export default {
  name: 'MiniAPP',
  components: {
    miniAppSelect,
    dyPay,
    dySet,
    BiDrawer,
  },
  data() {
    return {
      requestData: {
        id: [],
        app_type: '',
      },
      showDyset: false,
      addMiniApp: false,
      shareDrawer: false,
      versionDrawer: false,
      payDrawer: false,
      isResize: false,
      showRecord: false,
      showMiniapp: false,
      showDyPay: false,
      dyOperateShow: false,
      loading: false,
      customerShow: false,
      drainageShow: false,
      wxServerShow: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0,
      },
      appTypeList: [
        { label: '全部', value: '' },
        { label: '微信小程序', value: '1' },
        { label: '抖音IAP小程序', value: '2' },
        { label: '抖音IAA小程序', value: '3' },
      ],
      drawerComponent: {
        shareDrawer,
        addMiniApp,
        versionDrawer,
        payDrawer,
        syncRecord,
        syncMiniapp,
        wxServer,
        dyOperate,
        customer,
        drainage,
      },
      rowInfo: {},
      tableData: [],
      tableColums: [
        {
          label: '小程序ID',
          prop: 'id',
          width: '100',
        },
        {
          label: '小程序名称',
          prop: 'name',
          slotScope: true,
        },
        {
          label: '主体',
          prop: 'body',
        },
        {
          label: '项目',
          prop: 'belongs',
        },
        {
          label: '投诉反馈显示',
          prop: 'feedback_status',
          slotScope: true,
        },
        {
          label: '版本',
          prop: 'version',
          slotScope: true,
        },
        {
          label: '操作',
          prop: 'zip',
          width: '180',
          slotScope: true,
        },
      ],
    };
  },

  mounted() {
    this.initData();
    this.onGetAppTypeList();
    this.$AccessReport.report('zhangyu-minApp', [this.$store.state.user.routerItem.name, '小程序管理', '小程序管理']);
  },
  methods: {
    ...mapActions('user', ['getMenuRouter']),
    async onGetAppTypeList() {
      const res = await appTypeDropdown();
      if (res.status_code == 1) {
        this.appTypeList = [{ label: '全部', value: '' }, ...res.data];
      }
    },
    async onfeedbackChange(row) {
      const res = await setFeedbackStatus({
        mini_app_id: row.id,
        feedback_status: row.feedback_status,
      });
      if (res.status_code == 1) {
        this.$message.success(res.msg);
        this.clickSearch();
      }
    },
    handleCommand(value, row) {
      this.rowInfo = row;
      if (value === 'version') {
        this.versionDrawer = true;
      } else if (value === 'pay') {
        if (row.app_type == 1) {
          this.payDrawer = true;
        } else {
          this.showDyPay = true;
        }
      } else if (value === 'del') {
        // this.deleteRow(row.id)
      } else if (value === 'service') {
        this.showDyset = true;
      } else if (value === 'dyOperate') {
        this.dyOperateShow = true;
      } else if (value === 'customer') {
        this.customerShow = true;
      } else if (value === 'drainage') {
        this.drainageShow = true;
      } else if (value === 'wxServer') {
        this.wxServerShow = true;
      }
    },
    startSearch() {
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0,
      };
      this.clickSearch();
    },
    requestRecord() {
      this.showRecord = true;
    },
    // 跳转到微信后台
    async toLinkWechat(row) {
      if (row.app_type === '2') {
        window.open(import.meta.env.VUE_APP_TIKTOK_URL + row.app_id);
        return;
      }
      const res = await encodeRowId({ raw_id: row.raw_id });
      if (res.status_code === 1) {
        const url = `http://bi.wozhangwan.com/weixinautologin/index/${res.data.data}`;
        window.open(url);
      } else {
        this.$message.error(res.msg);
      }
      // const url = 'http://bi.wozhangwan.com/weixinautologin/index/' + row.raw_id
      // window.open(url)
    },
    deleteRow(id) {
      miniAppDel({ id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg);
          this.clickSearch();
          this.getMenuRouter();
        }
      });
    },
    addNewApp() {
      this.addMiniApp = true;
    },
    initData() {
      this.clickSearch();
    },
    miniAppResult(value) {
      this.requestData.id = value;
    },
    clickSearch() {
      const data = {
        id: this.requestData.id,
        app_type: this.requestData.app_type,
      };
      this.loading = true;
      miniAppIndex({ ...data, ...this.page_info }).then((res) => {
        this.loading = false;
        if (res.status_code === 1) {
          this.tableData = res.data.data;
          this.page_info = res.data.page_info;
        }
      });
    },
    reset() {
      this.isResize = true;
      setTimeout(() => {
        this.isResize = false;
      }, 2000);
      this.$set(this, 'requestData', {
        id: [],
        app_type: '',
      });
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0,
      });
    },

    shareSetting(row) {
      this.rowInfo = row;
      this.shareDrawer = true;
    },
    handlePageChange(page) {
      // this.page_info.page
      console.log(page);
      this.clickSearch();
    },
    onSubmit() {
      this.clickSearch();
    },
  },
};
</script>
<style lang="scss" scoped>
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
}
.miniApp {
  margin-left: 10px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
    color: #06c261;
    cursor: pointer;
  }
  .sub {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin: 0;
  }
}
.miniAppImage {
  width: 40px;
  height: 40px;
  position: relative;
  .imageIcon {
    font-size: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 40px;
  }
}

.titleImage {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
.qrImage {
  width: 200px;
  height: 200px;
}
.recordIcon {
  font-size: 24px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  top: 5px;
}
.colorDian {
  margin: 0 10px;
}
</style>
